<template>
  <view class="user">
    <image src="/static/index/swiper1.jpg" class="userbg" mode="widthFix" />
    <view class="ewm" @click="tovip()">
      <image src="/static/index/ewm.png" class="ewmimg" mode="widthFix" />
      <view class="ewmtit">会员码</view>
    </view>
    <!-- 点击登录 -->
    <view class="usernav" v-if="!token">
      <view class="untop" @click="tologin()">
        <view class="untx">
          <view class="uncircle">
            <image :src="userInfo.avatar" class="untximg" mode="widthFix" />
          </view>
        </view>
        <view class="unnamebox">
          <view class="unname">请点击授权登录</view>
          <view class="untext">当前成长值0/0</view>
          <view class="unplan">
            <view class="progress-box">
              <progress
                :percent="pgList"
                activeColor="#10AEFF"
                stroke-width="5"
              />
            </view>
          </view>
        </view>
        <view class="unlabel">
          <view class="unequ">
            <view>会员权益</view>
            <image
              src="/static/user/rightbai.png"
              class="bairight"
              mode="widthFix"
            />
          </view>
        </view>
      </view>
      <view class="unbot">
        <view class="unson" v-for="(item, i) in navlist" :key="i">
          <view class="unsonnum"> *** </view>
          <view class="unsontit">{{ item.name }}</view>
        </view>
      </view>
    </view>
    <!-- 点击登录 -->
    <!-- 登录之后 -->
    <view class="usernav" v-else>
      <view class="untop" @click="changeuserinfo()">
        <view class="untx" @click.stop="changetx()">
          <view class="uncircle2">
            <image :src="userInfo.avatar" class="untximg" mode="widthFix" />
            <!-- <image src="@/static/user/v2.png" class="v2" mode="widthFix" /> -->
          </view>
        </view>
        <view class="unnamebox">
          <view class="unname"
            >{{ userInfo.name }}
            <image
              src="@/static/index/right.png"
              mode="widthFix"
              class="unright"
            />
          </view>
          <view class="untext">当前成长值0/500</view>
          <view class="unplan">
            <view class="progress-box">
              <progress
                :percent="pgList"
                activeColor="#10AEFF"
                stroke-width="5"
              />
            </view>
          </view>
        </view>
        <view class="unlabel">
          <view class="unequ">
            <view>会员权益</view>
            <image
              src="/static/user/rightbai.png"
              class="bairight"
              mode="widthFix"
            />
          </view>
        </view>
      </view>
      <view class="unbot">
        <view
          class="unson"
          v-for="(item, i) in navlist"
          :key="i"
          @click="tonavson(item.url)"
        >
          <view class="unsonnum"> {{ item.num }} </view>
          <view class="unsontit">{{ item.name }}</view>
        </view>
      </view>
    </view>
    <!-- 登录之后 -->
    <!-- #ifdef H5 -->
    <view style="height: 210rpx"></view>
    <!-- #endif -->
    <!-- #ifdef APP -->
    <view style="height: 230rpx"></view>
    <!-- #endif -->
    <!-- 加入会员 -->
    <view class="addmembox" v-if="!token">
      <view class="addmemtop">
        <view>新用户加入会员，享会员权益</view>
        <view class="addtit">立即加入</view>
      </view>
      <view class="addmembot">
        <view class="addson" v-for="(item, i) in addlist" :key="i">
          <image :src="item.img" mode="widthFix" class="addimg" />
          <view class="addtext">{{ item.name }}</view>
        </view>
      </view>
    </view>
    <!-- 加入会员 -->
    <!-- banner图 -->
    <view class="banner">
      <image src="/static/user/banner.png" class="bannerimg" mode="widthFix" />
    </view>
    <!-- banner图 -->
    <!-- 我的服务 -->
    <view class="servebox">
      <view class="servetit">我的服务</view>
      <view class="serve">
        <view
          class="serveson"
          v-for="(item, i) in servelist"
          :key="i"
          @click="toserveson(item.url)"
        >
          <image :src="item.img" class="serveimg" mode="widthFix" />
          <view class="servename">{{ item.name }}</view>
        </view>
      </view>
    </view>
    <!-- 我的服务 -->
    <view class="bottit">会员卡适用于奈雪的茶和奈雪酒屋指定范围</view>
    <view style="height: 300rpx; background-color: #f0f8fa"></view>
  </view>
</template>

<script setup>
import { computed, ref } from "vue";
import { useStore } from "vuex";

const store = useStore();
const token = computed(() => store.state.token);
const userInfo = computed(() => store.state.userInfo);

const ticket = computed(() => store.state.userdata.ticket);
const score = computed(() => store.state.userdata.score);
const balance = computed(() => store.state.userdata.balance);
const giftcard = computed(() => store.state.userdata.giftcard);

const pgList = 0;
const navlist = [
  {
    num: ticket,
    name: "奈雪券",
    url: "/pages/user/ticket",
  },
  {
    num: score,
    name: "积分商城",
    url: "/pages/user/scorestore",
  },
  {
    num: balance,
    name: "余额",
    url: "/pages/user/balance",
  },
  {
    num: giftcard,
    name: "礼品卡",
    url: "/pages/user/giftlist",
  },
];
const addlist = [
  {
    img: "/static/user/kim1.png",
    name: "入会有礼",
  },
  {
    img: "/static/user/kim2.png",
    name: "积分兑换",
  },
  {
    img: "/static/user/kim3.png",
    name: "升级特权",
  },
  {
    img: "/static/user/kim4.png",
    name: "生日特权",
  },
  {
    img: "/static/user/kim5.png",
    name: "奈雪宝藏",
  },
];
const servelist = [
  {
    img: "/static/user/nav1.png",
    name: "积分签到",
    url: "/pages/index/null",
  },
  {
    img: "/static/user/nav2.png",
    name: "送她心愿",
    url: "/pages/index/null",
  },
  {
    img: "/static/user/nav3.png",
    name: "奈雪商城",
    url: "/pages/index/null",
  },
  {
    img: "/static/user/nav4.png",
    name: "联系客服",
    url: "/pages/index/null",
  },
  {
    img: "/static/user/nav5.png",
    name: "我的订单",
    url: "/pages/index/null",
  },
  {
    img: "/static/user/nav6.png",
    name: "我的资料",
    url: "/pages/index/null",
  },
  {
    img: "/static/user/nav7.png",
    name: "收货地址",
    url: "/pages/user/myaddress",
  },
  {
    img: "/static/user/nav8.png",
    name: "更多服务",
    url: "/pages/user/moreserve",
  },
];

// 跳转
const changeuserinfo = () => {
  uni.navigateTo({
    url: "/pages/user/userinfo",
  });
};
const tonavson = (url) => {
  uni.navigateTo({
    url: url,
  });
};
const toserveson = (url) => {
  uni.navigateTo({
    url: url,
  });
};
const tologin = () => {
  uni.navigateTo({
    url: "/pages/login/login",
  });
};
const tovip = () => {
  uni.navigateTo({
    url: "/pages/user/vip",
  });
};
const changetx = () => {
  uni.navigateTo({
    url: "/pages/user/changetx",
  });
};
</script>

<style lang="scss">
.user {
  width: 100%;
  height: 100vh;
  box-sizing: border-box;
  background-color: #f0f8fa;
  .userbg {
    width: 100%;
    height: 30vh;
    position: relative;
  }
  .ewm {
    width: 25%;
    height: 60rpx;
    background-color: #fff;
    position: absolute;
    top: 3%;
    right: 6%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #a6b516;
    border-radius: 40rpx;
    padding: 10rpx 20rpx;
    box-sizing: border-box;
    .ewmimg {
      width: 25%;
      margin-right: 10rpx;
    }
  }
  // 点击登录
  .usernav {
    width: 94%;
    aspect-ratio: 2.2;
    background-color: white;
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 16rpx;
    box-shadow: #e8edef 0rpx 0rpx 10rpx;
    .untop {
      width: 100%;
      height: 48%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .untx {
        width: 30%;
        height: 100%;
        position: relative;
        .uncircle {
          width: 76%;
          height: 100%;
          border-radius: 50%;
          background-color: #fff;
          box-shadow: #b3b8be 0rpx 0rpx 10rpx;
          position: absolute;
          top: 33%;
          left: 50%;
          transform: translate(-50%, -50%);
          display: flex;
          justify-content: center;
          align-items: center;
          .untximg {
            width: 96%;
            border-radius: 50%;
          }
        }
      }
      .unnamebox {
        width: 45%;
        height: 100%;
        padding-top: 35rpx;
        box-sizing: border-box;
        .unname {
          font-weight: bold;
        }
        .untext {
          font-size: 0.7rem;
          color: #a19f9f;
          margin: 5rpx 0;
        }
        .unplan {
          width: 88%;
        }
      }
      .unlabel {
        width: 25%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        .unequ {
          width: 100%;
          height: 60rpx;
          background-color: #f9b613;
          font-size: 0.8rem;
          color: white;
          padding: 10rpx 20rpx;
          box-sizing: border-box;
          border-top-left-radius: 30rpx;
          border-bottom-left-radius: 30rpx;
          display: flex;
          align-items: center;
          .bairight {
            width: 30rpx;
          }
        }
      }
    }
    .unbot {
      width: 100%;
      height: 52%;
      display: flex;
      .unson {
        width: 25%;
        height: 100%;
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        .unsonnum {
          font-size: 1.5rem;
          color: #5b5a5a;
          margin-bottom: 10rpx;
        }
        .unsontit {
          font-size: 0.9rem;
          color: #aaabac;
        }
      }
    }
    // 登录之后
    .usernav {
      z-index: 99;
    }
    .untx {
      width: 30%;
      height: 100%;
      position: relative;
      .uncircle2 {
        width: 76%;
        height: 100%;
        border-radius: 50%;
        background-color: #fff;
        box-shadow: #b3b8be 0rpx 0rpx 10rpx;
        position: absolute;
        top: 33%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: flex;
        justify-content: center;
        align-items: center;
        .untximg {
          width: 96%;
          border-radius: 50%;
        }
        .v2 {
          width: 60rpx;
          position: absolute;
          bottom: -10rpx;
          right: 0;
        }
      }
    }

    .unname {
      display: flex;
      align-items: center;
      .unright {
        width: 30rpx;
        margin-left: 10rpx;
      }
    }
    .unsonnum {
      font-weight: bold;
    }
    // 登录之后
  }
  // 加入会员
  .addmembox {
    width: 94%;
    margin: auto;
    aspect-ratio: 2.4;
    box-shadow: #e8edef 0rpx 0rpx 10rpx;
    border-radius: 16rpx;
    background-color: white;
    padding: 30rpx;
    box-sizing: border-box;
    .addmemtop {
      width: 100%;
      display: flex;
      justify-content: space-between;
      .addtit {
        font-size: 0.9rem;
        color: #b3c153;
      }
    }
    .addmembot {
      width: 100%;
      display: flex;
      justify-content: space-between;
      margin-top: 30rpx;
      .addson {
        width: 20%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        .addimg {
          width: 80%;
          margin-bottom: 20rpx;
        }
        .addtext {
          color: #939395;
          font-size: 0.8rem;
        }
      }
    }
  }
  // 加入会员
  // banner图
  .banner {
    width: 94%;
    margin: auto;
    margin-top: 20rpx;
    .bannerimg {
      width: 100%;
      height: 100%;
      border-radius: 16rpx;
    }
  }
  // banner图
  // 我的服务
  .servebox {
    width: 100%;
    margin-top: 10rpx;
    // aspect-ratio: 1.8;
    box-shadow: #e8edef 0rpx 0rpx 10rpx;
    background-color: white;
    padding: 40rpx 30rpx;
    box-sizing: border-box;
    .serve {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      .serveson {
        width: 25%;
        aspect-ratio: 1;
        text-align: center;
        margin-top: 30rpx;

        .serveimg {
          width: 45%;
        }
        .servename {
          font-size: 0.8rem;
          color: #8f9195;
          margin-top: 10rpx;
        }
      }
    }
  }
  // 我的服务
  .bottit {
    width: 100%;
    text-align: center;
    padding-top: 30rpx;
    font-size: 0.8rem;
    color: #939495;
    background-color: #f0f8fa;
  }
}
</style>
